<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.js"></script>
</head>
<body>
    <!-- 
        表单 -- 用到的标签
           input (type : text password  radio checkbox  file)
           select
           textarea
        可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
        v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。应该通过 JavaScript 在组件的 data 选项中声明初始值
        v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件  
           text 和 textarea 元素使用 value property 和 input 事件；
           checkbox 和 radio 使用 checked property 和 change 事件；
           select 字段将 value 作为 prop 并将 change 作为事件。
        注意：v-model 双向绑定的数据一定要在data 中初始化 
        checkbox: 
           如果是多选：初始化的数据类型就是一个[]
           如果是选中和非选中：初始化的数据类型是 true / false
        select:
           如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为'未选中'状态。在 iOS 中，这会使用户无法选择第一个选项。因此,一般都要添加 <option disabled value="">请选择</option>。
        表单修饰符： -- 注意：都是添加在 v-model之后
           .lazy :在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。添加 lazy 修饰符后，就会在 change 事件之后才进行同步
                  <input v-model.lazy="msg">
           .number ：将用户输入的值转化为数值类型
                  <input v-model.number="age" type="number">
           .trim ：如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
                  <input v-model.trim="msg">
     -->
    <div id="app">
        <div>
            <label>用户名</label>
            <!-- 渲染的时候到底加不加this ？ 模板语法是没有this的-->
            <input type="text" v-model.lazy="username"> --- {{this.username}} <!-- v-model双向绑定，此处写了 username，在data中就必须初始化username -->
        </div>
        <div>
            <label>密码</label>
            <input type="password" v-model.trim="password"> --- {{password}}
        </div>
        <div>
            <label>性别</label>
            <input type="radio" name="sex" v-model="sex" value="1" >男 <!-- 单选框必须加name ; 如果初始化的sex是数值类型，value前加冒号-->
            <input type="radio" name="sex" v-model="sex" value="0" >女  ---  {{sex == '1'?'男':'女'}} 
        </div>
        <div>
            <label>年龄</label>
            <input type="number" name="age" v-model.number="age"> --- {{age}}
        </div>
        <div>
            <label>爱好</label>
            <input type="checkbox" name="hobby" v-model="hobby" value="篮球">篮球 <!-- 单选框必须加name -->
            <input type="checkbox" name="hobby" v-model="hobby" value="排球">排球
            <input type="checkbox" name="hobby" v-model="hobby" value="足球">足球
            <input type="checkbox" name="hobby" v-model="hobby" value="网球">网球  --- {{hobby}}
        </div>
        <div>
            <label>选项</label>
            <select v-model="lesson">
                <option disabled value="">请选择</option> <!-- 此时要注意 data中lesson的初始值应该是不能和任何一个option匹配的值 -->
                <option value="1">选项1</option> 
                <option value="2">选项2</option>
                <option value="3">选项3</option>
            </select> --- {{lesson}}
        </div>
        <div>
            <label>备注</label>
            <textarea v-model="remark"></textarea> --- {{remark}}
        </div>
        <input type="checkbox" v-model="flag">同意此协议
        <div style="margin-left: 30px;margin-top: 10px;">
            <button :disabled="!flag" @click="getData">提交表单</button> <!-- 注意此处用到的是变量，所以要绑定属性 -->
        </div>
    </div>
</body>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            username:'',
            password:'',
            sex:1,
            age:10,
            hobby:[],
            lesson:0, // lesson初始值不能和任何一个option项相同
            remark:'',
            flag:false,
        },
        methods:{
            getData(){
                console.log({
                    username:this.username, // 注意：在data中初始化username,其他地方赋值用this.username,模板语法{{username}}
                    password:this.password,
                    sex:this.sex,
                    age:this.age,
                    ageType:typeof(this.age), //"number"
                    hobby:this.hobby,
                    lesson:this.lesson,
                    remark:this.remark,
                })
            }
        }
    })
</script>
</html>